<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>woodwhales-music</title>
    <link rel="icon" type="image/x-icon" th:href="@{/favicon.ico}">
    <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}" />
    <link rel="stylesheet" th:href="@{/css/my-css.css}" />
</head>
<body>
<div class="layui-main site-inline">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>woodwhales-music-admin</legend>
    </fieldset>

    <blockquote class="layui-elem-quote">移风易俗，莫善于乐。</blockquote>

    <button type="button" class="layui-btn layui-btn-xs" th:onclick="returnHome()">返回</button>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>添加音乐</legend>
    </fieldset>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" id="musicName" name="musicName" lay-verify="required" autocomplete="off" placeholder="请输入音乐名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" id="artist" name="artist" lay-verify="required" autocomplete="off" placeholder="请输入作者" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑</label>
            <div class="layui-input-block">
                <input type="text" id="album" name="album" lay-verify="required" autocomplete="off" placeholder="请输入专辑" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">自动填充</label>
                <div class="layui-input-block">
                    <input type="radio" name="autoFill" value="true" title="是" checked="">
                    <input type="radio" name="autoFill" value="false" title="否">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">音频后缀</label>
                <div class="layui-input-block">
                    <input type="radio" name="audioSuffix" value=".mp3" title=".mp3" checked="">
                    <input type="radio" name="audioSuffix" value=".m4a" title=".m4a">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">封面后缀</label>
                <div class="layui-input-block">
                    <input type="radio" name="coverSuffix" value=".jpg" title=".jpg" checked="">
                    <input type="radio" name="coverSuffix" value=".png" title=".png">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">链接</label>
                <div class="layui-input-block">
                    <input type="text" style="width: 940px;" id="audioUrl" name="audioUrl" autocomplete="off" placeholder="请输入链接" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" id="clearAudioUrl" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe640;</i>清空</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">封面</label>
                <div class="layui-input-block">
                    <input type="text" style="width: 940px;" id="coverUrl" name="coverUrl" autocomplete="off" placeholder="请输入封面" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" id="clearCoverUrl" class="layui-btn layui-btn-sm layui-btn-warm"><i class="layui-icon">&#xe640;</i>清空</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" id="sort" name="sort" autocomplete="off" placeholder="请输入排序值" class="layui-input">
            </div>
        </div>
		<div class="layui-form-item">
			<div class="layui-input-block">
			  <button type="submit" class="layui-btn layui-btn-xs" lay-submit="" lay-filter="submitFilter">立即提交</button>
			  <button type="reset" class="layui-btn layui-btn-primary layui-btn-xs">重置</button>
			</div>
		</div>
    </form>

    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">音乐仓库链接</h2>
            <div class="layui-colla-content">
                <p th:each="music : ${musicStore}">
                    <a th:href="${music.link}" target="_blank" th:text="${music.name} + '-' + ${music.link}"></a>
                </p>
            </div>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>解析音乐</legend>
    </fieldset>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">音乐平台</label>
            <div class="layui-input-block" >
                <input th:each="musicPlatformType : ${musicPlatformTypes}" lay-verify="otherReq" type="radio" name="platformType" th:value="${musicPlatformType.platform}" th:title="${musicPlatformType.desc}">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">源码内容</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入要解析的html" lay-verify="required" lay-reqtext="要解析的html不允许为空" name="content" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-xs" lay-submit="" lay-filter="parseSubmitFilter">解析</button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-xs">重置</button>
            </div>
        </div>
    </form>

    <div th:replace="~{admin/footer::footer}"></div>
</div>

<script th:inline="none">
    function returnHome() {
        location.href = './';
    }

    layui.use(['form', 'layer', 'element'], function(){
        var form = layui.form,
            layer = layui.layer,
            element = layui.element;

        $('#clearAudioUrl').click(function() {
            $('#audioUrl').val('');
        });

        $('#clearCoverUrl').click(function() {
            $('#coverUrl').val('');
        });

        $("#audioUrl").blur(function() {
            autoFill(this.value, "coverUrl", 'coverSuffix');
        });

        $("#coverUrl").blur(function() {
            autoFill(this.value, "audioUrl", 'audioSuffix');
        });

        function autoFill(value, elementId, suffixElementId) {
            let autoFill = $('input[name="autoFill"]:checked').val()
            let autoFillElementVal  = $("#" + elementId).val()
            if(autoFill === 'true'
                && (value != "" && value!=null && value != undefined)
                && (autoFillElementVal != null && autoFillElementVal != undefined && autoFillElementVal.length == 0)) {
                let start = value.lastIndexOf('.');
                if(start >= 0) {
                    value = value.substr(0, start);
                }

                let suffix = $('input[name='+ suffixElementId +']:checked').val()
                $("#" + elementId).val(value + suffix);
            }
        }

        //自定义验证规则
        form.verify({
            otherReq: function(value, item){
                var $ = layui.$;
                var verifyName=$(item).attr('name')
                    , verifyType=$(item).attr('type')
                    ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                    ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                    ,isTrue= verifyElem.is(':checked')//是否命中校验
                    ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
                if(!isTrue || !value){
                    //定位焦点
                    focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
                    //对非输入框设置焦点
                    focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
                        focusElem.css(verifyType=='radio'? {"color":""} : {"border-color":""});
                    }).focus();
                    return '必填项不能为空';
                }
            }
        });

        form.on('submit(parseSubmitFilter)', function (data) {
            var index =layer.load(2, { shade: [0.1,'#fff'] });
            $.ajax({
                url:'./parse',
                type:'post',
                dataType:'json',
                contentType:"application/json",
                async:true,
                cache:false,
                data:JSON.stringify(data.field),
                success:function(res) {
                    layer.close(index);
                    if(res.code == 0) {
                        $('#musicName').val(res.data.musicTitle);
                        $('#artist').val(res.data.artist);
                        $('#album').val(res.data.album);
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                },
                error:function(res) {
                    layer.close(index);
                    layer.msg('网络异常', {icon: 5});
                }
            });
            return false;
        });

        form.on('submit(submitFilter)', function(data){
            var index =layer.load(2, { shade: [0.1,'#fff'] });
            $.ajax({
                url:'./createMusic',
                type:'post',
                dataType:'json',
                contentType:"application/json",
                async:true,
                cache:false,
                data:JSON.stringify(data.field),
                success:function(res) {
                    layer.close(index);
                    if(res.code == 0) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function() {
                            location.href = './'
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                },
                error:function(res) {
                    layer.close(index);
                    layer.msg('网络异常', {icon: 5});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>